/**
 * create by Alec
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { createForm } from "rc-form";
import { mid2Url } from "@ali/ding-mediaid";
import autobind from "autobind-decorator";
// actions
import { confirmSuccessInfo } from "../../actions/confirm/index.js";

// utils
import { setTitle, close, setLeft, pickConversation, chatOpen, setRight } from "../../utils/dingtalk.js";
import urlParams from "../../utils/urlParams";
import lwp from "../../utils/lwp";
import { set, get } from "../../utils/db.js";

//将store注入组件的props
const mapStateToProps = () => ({});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
	//区分绑定到props的action与传递的props
	actions: bindActionCreators(
		{
			dispatch,
			confirmSuccessInfo
		},
		dispatch
	)
});

@connect(mapStateToProps, mapDispatchToProps)
class Confirm extends Component {
	static defaultProps = {};
	//propTypes 验证
	static propTypes = {
		actions: PropTypes.shape({
			dispatch: PropTypes.func.isRequired,
			confirmSuccessInfo: PropTypes.func
		})
	};
	constructor(props) {
		super(props);
		this.state = {};
		setRight({
			text: "关闭",
			onClick: function () {
				close();
			}
		})
		setTitle({
			title: "确认到岗"
		});
	}
	/**
	   * 数据提交成功 欢迎加入页面出现
	   * 获取姓名、公司姓名、头像数据
	   */
	componentWillMount() {
		const userId = get("userId");
		setTitle({ title: "确认入职" });
		setLeft({ onClick: this.handleDone })
		this.props.actions.confirmSuccessInfo(userId)
			.then(res => {
				const {
					name,
					avatar,
					uid,
					companyName,
					dept,
					position,
					employeeStatus,
					employeeType,
					hireDate,
					sendWelcomeAnnouncemenFlag,
					deptManager,
					jobNumber
				} = res.result;
				if (res.success) {
					this.setState({
						name,
						uid,
						avatar,
						companyName,
						dept,
						position,
						employeeStatus,
						employeeType,
						hireDate,
						sendWelcomeAnnouncemenFlag,
						deptManager,
						jobNumber
					});
					// 重新将右上角设置为更多
					// 重新将右上角设置为没有
					// setRight({
					//   text: "更多"
					// });
				} else {
					console.log("error");
				}
			});
	}
	@autobind
	handleDone() {
		set("refreshPreList", true);
		close();
		// const fromPage = getUrlParam("fromMsg");
		// if (fromPage === "preview") {
		//   // 确认到岗消息推送的直接关掉
		//   close();
		//   // } else if (fromPage) {
		//   //     // 其他消息推送，跳到对应的页面
		//   //     // 目前好像不存在这样的消息推送
		//   //     openLink(`#${fromPage}`);
		// } else {
		//   // 不是从消息推送进来的（比如智能人事）进待入职列表
		//   openLink("#preJobList");
		// }
	}
	shareCard() {
		const t = this;
		const lwpSendCard = "/r/Adaptor/HRMCommonI/sendCardMessage";

		//选群组
		pickConversation().then((res) => {
			const chatId = res.cid;
			const corpId = urlParams.getUrlSearchParam("corpId");
			//参数 CorpID 用户ID 群cid
			const params = [
				corpId,
				t.state.uid,
				chatId
			]
			//发送名片消息
			lwp(lwpSendCard, { body: params }).then((result) => {
				//打开聊天会话
				chatOpen({ corpId, cid: chatId })
			});
		})

		//window.location.href = "dingtalk://dingtalkclient/action/switchtab?index=0&name=im&reload=true";
	}
	@autobind
	openProfile() {
		console.log( get("userId"), get("corpId"))
		dd.biz.util.open({
			name: "profile",
			params: {
				id: get("userId"),
				corpId: get("corpId")
			},
			onSuccess: function () {
				console.info("open profile success");
			},
			onFail: function (err) {
				console.error("open profile fail", err);
			}
		});
	}

	render() {
		const {
      		name,
			avatar,
			companyName,
			dept,
			position,
			employeeStatus,
			employeeType,
			hireDate,
			sendWelcomeAnnouncemenFlag,
			deptManager,
			jobNumber
		} = this.state;
		return (
			<div className="confirm-con">
				<div className="entry-success">
					<div className="entry-header">
						<img src="https://gw.alicdn.com/tfs/TB1HosSX3vD8KJjy0FlXXagBFXa-120-120.png" alt="" />
						<h4>新员工{name}已成功加入</h4>
						<p>{companyName}</p>
					</div>
					<div className="entry-body">
						<div className="entry-card">
							<div className="entry-con" onClick={this.openProfile}>
								<div className="entry-name">
									{name && <p className="name">{name}</p>}
									<p className="dept-name">
										{
											dept ?
												<span className="dept">{dept}</span> :
												<span>{companyName}</span>
										}
									</p>
									<p className="dept-position">

										{position && <span className="position">{position}</span>}
									</p>
								</div>
								<div className="entry-avatar">
									{
										avatar
											? <span><img src={`${mid2Url(avatar, { imageSize: "thumb" })}`} /></span>
											: <span>{name ? name.slice(-2) : ""}</span>
									}
								</div>
							</div>
							<div className="hireDate">
								<div className="share-btn" onClick={() => this.shareCard()}>
									分享名片
								</div>
							</div>
						</div>

						<div className="entry-prompt">
							<p>
								<i className={sendWelcomeAnnouncemenFlag && "has-data"}></i>
								{
									sendWelcomeAnnouncemenFlag ?
										<span>员工自动收到入职欢迎公告</span> :
										<span>暂未设置员工入职欢迎公告</span>}
							</p>
							<p>
								<i className={deptManager && "has-data"}></i>
								部门主管：{
									deptManager ?
										<span>
											{
												deptManager.length > 1 ?
													deptManager.join('、') :
													deptManager.join('')
											}
										</span> :
										<span>未设置</span>}
							</p>
							<p>
								<i className={jobNumber && "has-data"}></i>
								自动计算员工工号：{jobNumber ? <span>{jobNumber}</span> : <span>未设置</span>}
							</p>
						</div>
					</div>
					{/* 
					<div className="confirmed-btn" onClick={this.handleDone}>
						完成
          			</div> */}
				</div>
			</div>
		);
	}
}
export default createForm()(Confirm);
